<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="lock_screen_constants.html">
<link rel="import" href="../../../cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="../../../cr_elements/shared_vars_css.html">
<link rel="import" href="../../../html/assert.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="pin_keyboard.html">

<!--

This module is a "pin setup" keyboard + pin display element.
It can be integrated into some UI container to set pin unlock.

Usage:
          <setup-pin-keyboard
              enable-submit="{{enableSubmit_}}"
              is-confirm-step="{{isConfirmStep_}}"
              on-pin-submit="onPinSubmit_"
              on-set-pin-done="onSetPinDone_"
              set-modes="{{setModes}}">
          </setup-pin-keyboard>

Where:
  * enable-submit - Notification property for the container to enable/disable
        submit button in the container (if it exists). True when pin can be
        submitted.
  * is-confirm-step - Notification property for the container to update UI
        when pin confirmation is requested. False when initial PIN entry step
        is active, true when pin confirmation is active.
  * on-pin-submit - Event handler for the user requested pin submit by pressing
        "Enter" key on the keyboard. setup-pin-keyboard will
        not submit pin automatically, delegating this step to outer container.
        Container must call setup-pin-keyboard.doSubmit() when
        pin should be submitted.
  * on-set-pin-done - Event handler for the "set pin done" event, which should
        normally close the pin setup UI. This object state is reset before
        sending this event.
  * set-modes - Reflects property set in password_prompt_dialog.js.

-->

<dom-module id="setup-pin-keyboard">
  <template>
    <style include="settings-shared">
      .error {
        color: var(--cros-text-color-alert);
        display: inline-block;
      }

      .warning {
        color: var(--cr-secondary-text-color);
      }

      #problemDiv {
        align-items: center;
        display: flex;
        flex-direction: row;
        font-size: 10px;
        height: 32px;
        min-height: 0;
        padding-bottom: 8px;
      }

      /* Hide this using visibility: hidden instead of hidden so that the
         dialog does not resize when there are no problems to display. */
      #problemDiv[invisible] {
        visibility: hidden;
      }
    </style>
    <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
        on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}"
        has-error="[[hasError_(problemMessageId_, problemClass_)]]"
        disabled="[[isSetModesCallPending_]]"
        enable-placeholder="[[enablePlaceholder]]" enable-letters>
      <!-- Warning/error; only shown if title is hidden. -->
      <div id="problemDiv" class$="[[problemClass_]]"
          invisible$="[[!problemMessageId_]]" problem>
        <span aria-live="assertive">
          [[formatProblemMessage_(locale, problemMessageId_,
                problemMessageParameters_)]]
        </span>
      </div>
    </pin-keyboard>
  </template>
  <script src="setup_pin_keyboard.js"></script>
</dom-module>
